
const path = require('path')
const { override, addPostcssPlugins, addWebpackExternals, fixBabelImports, addLessLoader, addWebpackAlias, addWebpackModuleRule } = require('customize-cra');
const pxtovw = require('postcss-px-to-viewport');
const autoprefixer = require('autoprefixer');
// 打包后文件放到dist
const paths = require('react-scripts/config/paths');
paths.appBuild = path.join(path.dirname(paths.appBuild), 'dist')


module.exports = {
    webpack: override(
        fixBabelImports('import', {
            libraryName: 'antd-mobile',
            style: true,
        }),
        addLessLoader({
            javascriptEnabled: true,
            modifyVars: {
                '@color-text-base':'#333',
                "@brand-primary": "#2dcbb5",
                "@brand-primary-tap": "#57d5c4",
                "@brand-success": "#6abf47",
                "@brand-warning": "#ffc600",
                "@brand-error": "#f4333c",
                "@brand-important": "#ff5b05",
                "@brand-wait": "#2dcbb5",
                "@fill-body": "#fff"
            }
        }),
        addPostcssPlugins([
            new pxtovw({
                unitToConvert: 'px', //需要转换的单位，默认为"px"；
                viewportWidth: 375, //设计稿的视口宽度
                unitPrecision: 5, //单位转换后保留的小数位数
                propList: ['*'], //要进行转换的属性列表,*表示匹配所有,!表示不转换
                viewportUnit: 'vw', //转换后的视口单位
                fontViewportUnit: 'vw', //转换后字体使用的视口单位
                selectorBlackList: [], //不进行转换的css选择器，继续使用原有单位
                minPixelValue: 1, //设置最小的转换数值
                mediaQuery: false, //设置媒体查询里的单位是否需要转换单位
                replace: true, //是否直接更换属性值，而不添加备用属性
                // exclude: [/node_modules/] //忽略某些文件夹下的文件
            }),
            new autoprefixer({
                overrideBrowserslist: [
                    "Android 4.1",
                    "iOS 7.1",
                    "Chrome > 31",
                    "ff > 31",
                    "ie >= 8"
                ]
            })
        ]),
        addWebpackExternals({ //不做打包处理配置，如直接以cdn引入的
            // highcharts:"window.highcharts"
        }),
       
        addWebpackAlias({
            '@': path.resolve(__dirname, 'src')
        }),
        (config)=>{ //暴露webpack的配置
            // 去掉打包生产map 文件
             config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false;
            //  开发模式 关闭react-devtools
            if(process.env.NODE_ENV==="production") config.devtool=false;
              
            return config
        }
    )
}